<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>资源列表</title>
    <script src="./js/LiteJS/Lite.js" type="text/javascript"></script>
    <script src="./js/common.js" type="text/javascript"></script>
</head>

<body>
<div class="mui-content" id="container">
    <ul id="item_list" class="mui-table-view">
    </ul>
</div>

<script type="text/javascript">
    var liSegmentStr = '<li class="mui-table-view-cell mui-collapse">' +
        '<a class="mui-navigate-right" href="#"><span>{file_name}</span></a>' +
        '<div class="mui-collapse-content storage-item-details">' +
        '<p>创建时间：{create_time}</p>' +
        '<p>资源体积：{file_size}</p>' +
        '</div>' +
        '</li>';

    function _callback() {
        var _keyword = getQueryVariable("keyWord");
        _keyword = getQueryVariable("keyWord") ? encodeURIComponent(_keyword) : "";
        // 创建列表
        getListData(_keyword);
        bindToDetails();
    }

    function bindToDetails() {
        //tap为mui封装的单击事件，可参考手势事件章节
        document.querySelectorAll('.storage-item-details').forEach(function (elem, i) {
            elem.addEventListener('click', function () {
                //打开详情页面
                sessionStorage.setItem("storage_item", JSON.stringify(list_data[i]));
                window.location.href = context_path.concat('/details.html');
            });
        });
    }

    // reserve list data
    var list_data = [];

    function getListData(_keyword) {
        var totalItemSegmentStr = "";
        $http({
            url: context_path + "/storage/list_data.yx",
            method: "post",
            data: {
                createUser: "alex",
                keyword: _keyword
            },
            async: false,
            success: function (responseText) {
                list_data = JSON.parse(responseText);
                for (var i in list_data) {
                    var element = list_data[i];
                    var singleLiSegmentStr = liSegmentStr.replace("{file_name}", element.fileName).replace("{create_time}", element.createTimestamp).replace("{file_size}", element.fileSize);
                    totalItemSegmentStr += singleLiSegmentStr;
                }
                document.querySelector("#item_list").innerHTML = totalItemSegmentStr;
            },
            Error: function (err_msg) {
                mui.error(err_msg);
            }
        });
    }
</script>
</body>

</html>